<template>
  <div class="top">
          <span class="iconfont icon-xiangzuo" @click="pot()"></span>
          <div class="io">
              <van-icon name="like-o" class="nn" @click="fun()" />
              <!-- <span class="iconfont icon-shoucang1" ></span> -->
              <div class="ii">
                  
                  <van-cell class="iconfont icon-fenxiang4"  @click="showShare = true" />
            <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
            />
              </div>
            
          </div>
      </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    
    data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
    methods:{
        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
        fun(){
            this.$toast({
                message: '恭喜，收藏成功',
                position: 'bottom',
            });
        },
        pot(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
    .top{
        width: 100%;
        height: 0.4rem;
        background-color: white;
        display: flex;
        justify-content: space-between;
        line-height: 0.4rem;
    }
    .top span{
        font-size: 0.2rem;
        color: brown;   
        text-align: center;
    }
    .io{
        display: flex;
        justify-content: space-between;
    }
   .nn{
       font-size:0.2rem;
       color: brown;   
        text-align: center;
        margin-top: 0.1rem;
   }
    .top>.nn{
        margin-left: 0.1rem;
    }
    .io .nn{
        margin-right: 0.1rem;
    }
    .ii{
        color: brown;
    }
    .van-cell{
        color: brown;
        background-color: rgba(0, 0, 0, 0.01);
    }
    .top .iconfont icon-xiangzuo{
        margin-left: 0.1rem;
    }
</style>